<template>
	<div>
		<div class="univBoxWrap" v-for="(item,index) in univData" :key='index' @click="gotos(item,index)">
			<div class="univBoxHeader flex-h">
				<span class="sp1"><img :src="item.icon" alt=""></span>
				<span class="flex1 sp2">{{item.academyName}}</span>
				<span  :class="['sp0', item.followStatus?'sp3':'sp4']" @click.stop.prevent="follow(item,index)">{{item.followStatus?'+关注':'已关注'}}</span>
			</div>
			<div class="univBoxDesc">
				<span>{{item.feature}}</span>
			</div>
			<div class="univBoxFooter flex-h">
				<span class="sp1 flex1"></span>
				<span v-show="isZhejiang==false" class="sp2"><i>2019年录取线 文科:</i><b class="b1">{{item.arts==0?'暂无':item.arts}}</b><i class="i2">理科:</i><b class="b1">{{item.science==0?'暂无':item.science}}</b></span>
				<span v-show="isZhejiang==true" class="sp2" style="width:3.2rem"><i>2019年录取线 :</i><b class="b1">{{item.enroll==0?'暂无':item.enroll}}</b></span>
			</div>
		</div>
	</div>
</template>
<script>
	import { followUser } from "~/api/colleges";
	import ls from 'store2';
	export default {
		props: {
			univData: Array
		},
		data() {
			return {
				opens: false,
				isZhejiang: false
			};
		},
		computed: {
		},
		creadted() {
		},
		mounted: function() {
			if (ls.get("userArea")=="浙江") {
				this.isZhejiang = true
			}
		},
		methods: {
			follow(item, index) {
				followUser({
					"academyCode": item.academyCode,
					"action": item.followStatus, 
					"fromUserId": ls.get('yxkData').userId
				}).then(res => {
					if (res.code === '0') {
						item.followStatus === 1 ? item.followStatus = 0 : item.followStatus = 1
						let sersData = JSON.parse(sessionStorage.getItem('serListData'))
						let obData = JSON.parse(sessionStorage.getItem('yxkListData'))
						if (obData) {
							obData.forEach((its) => {
								if (its.academyCode == item.academyCode) {
									its.followStatus = item.followStatus
								}
							})
						}
						if (sersData) {
							sersData.forEach((ite) => {
								if (ite.academyCode == item.academyCode) {
									ite.followStatus = item.followStatus
								}
							})
						}
						setTimeout(() => {
							if (sersData) {
								sessionStorage.setItem('serListData', JSON.stringify(sersData))
							}
							if (obData) {
								sessionStorage.setItem('yxkListData', JSON.stringify(obData))
							}
						}, 20)
					}
					this.$vux.toast.text(res.message);
				}).catch((error) => {
					// this.$vux.toast.text('服务器故障'); 
				})
			},
			gotos(datas, index) {
				this.$store.commit('changeFollowIndex', index)
				this.goto('../yxk/academyDetail?academyCode='+datas.academyCode)
			},
			goto(routerName) {
				this.$router.push({
					path: routerName				
				});
			},
		}
	};
</script>
<style scoped lang="less">
	.univBoxWrap {
		width: 6.9rem;
		height: 3rem;
		margin: 0.2rem auto 0;
		background: #fff;
		border-radius: 0.1rem;
		overflow: hidden;
		box-shadow: 0px 0px 20px 0px rgba(204, 204, 204, 0.3);
		.univBoxHeader {
			height: 0.6rem;
			margin-top: 0.3rem;
			margin-bottom: 0.2rem;
			padding: 0 0.3rem;
			box-sizing: border-box;
			.sp1 {
				img {
					width: 0.6rem;
					height: 0.6rem;
					display: block;
					background: url('~/static/iconheader.png') no-repeat;
					background-size: 100%;
					border-radius: 50%;
				}
			}
			.sp2 {
				font-size: 0.34rem;
				font-weight: bold;
				color: #222;
				padding-left: 0.2rem;
				box-sizing: border-box;
			}
			.sp0 {
				width: 1.1rem;
				height: 0.5rem;
				border-radius: 0.5rem;
				font-size: 0.26rem;
				font-weight: bold;
				text-align: center;
				line-height: 0.5rem;
			}
			.sp3 {
				color: @mainColor;
				border: 0.02rem solid @mainColor;
				box-sizing: border-box;
			}
			.sp4 {
				background: #FAFAFA;
				color: #BBBBBB;
			}
		}
		.univBoxDesc {
			padding: 0 0.3rem;
			box-sizing: border-box;
			height: 0.8rem;
			span {
				line-height: 0.4rem;
				font-size: 0.26rem;
				color: #999999;
				font-weight: bold;
			}
		}
		.univBoxFooter {
			padding-left: 0.3rem;
			box-sizing: border-box;
			margin-top: 0.3rem;
			.sp1 {
				text-align: left;
				font-size: 0.3rem;
				font-weight: bold;
				color: #BBBBBB
			}
			.sp2 {
				width: 5.3rem;
				height: 0.6rem;
				background: #FAFAFA;
				border-top-left-radius: 0.3rem;
				border-bottom-left-radius: 0.3rem;
				padding-left: 0.25rem;
				line-height: 0.6rem;
				i,
				b {
					font-size: 0.26rem;
					font-weight: bold;
				}

				i {
					color: #222
				}

				b {
					color: @mainColor
				}

				.i2 {
					margin-left: 0.2rem;
				}

				.b1 {
					margin-left: 0.1rem;
				}
			}
		}
		.descBox {
			h2 {
				font-size: 0.3rem;
				font-weight: normal;
			}
			span {
				font-size: 0.24rem;
				color: #838383;
			}
		}
	}
</style>
